﻿<div class="row-fluid">
    <div class="well span4" style="max-width: 200px; padding: 8px 0px;" data-bind="with: folder">
        <div align="center" style="margin-top: 5px"><button class="btn btn-info" data-bind="click: function() { $root.folder.selectNewMessage(); }"><span>Compose</span></button></div>
        <hr/>
        <ul data-bind="foreach: folders" class="nav nav-list">
            <li style="padding-bottom: 10px">
                <a data-bind="click: function() { $root.folder.selectFolder($data); }" href="#">
                    <span data-bind="text: Name, css: { 'boldText': $root.folder.workingFolder().Id() == $data.Id()}"></span>
                    ( <span data-bind="visible: $data.FolderType() == 0, text: $root.folder.numberMesInbox"></span>
                    <span data-bind="visible: $data.FolderType() == 1, text: $root.folder.numberMesOutbox"></span>
                    <span data-bind="visible: $data.FolderType() == 2, text: $root.folder.numberMesTrash"></span> )
                    <i class="icon-chevron-right pull-right"></i>
                </a>
            </li>
        </ul>
        <hr style="margin-bottom: 10px;"/>
        <div align="center" style="margin-bottom: 10px;">
            <a data-toggle="modal" href="#CreateLabelDialog"><small>Create new label</small></a>
        </div>
        @Html.Partial("MessageFolder/CreateLabel")
    </div>
    <div class="span9">
        <div data-bind="visible: $root.folder.listViewMode">
            @Html.Partial("MessageFolder/MessageListMode")
        </div>
    </div>
    <div class="span9">
        <div data-bind="visible: $root.folder.detailsViewMode">
            @Html.Partial("MessageFolder/MessageViewMode")
        </div>
    </div>
    <div class="span9">
        <div data-bind="visible: $root.folder.composeViewMode">
            @Html.Partial("MessageFolder/MessageComposeMode")
        </div>
    </div>
</div>